<!DOCTYPE html>
<!-- Created by 白墨 on 2021/4/17 22:35:57-->
<html lang="zh-cmn-Hans-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments ::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白墨的个人博客</title>
</head>

<body>
<!-- 导航 -->
<nav th:replace="_fragments::menu(1)" class="ui  attached segment m-shadow-small ">
</nav>


<!-- 中间部分 -->
<div class="m-padded-tb-large " style="z-index: -1">
    <div class="ui container animated fadeInUp ">
        <div class="ui stackable grid">
            <!-- left(博客列表) -->
            <div class="eleven wide column m-padded-lr">
                <!-- header -->
                <div class="ui blue top attached segment tm">
                    <div class="ui middle aligned two column grid ">
                        <div class="column">
                            <h3 class=" m-color">博客</h3>
                        </div>
                        <div class="right aligned column">
                            共
                            <h2 class="ui orange header m-inline-block" th:text="${page.total}"></h2>篇
                        </div>
                    </div>
                </div>
                <!-- content -->
                <div class="ui attached segment tm">
                    <div class="ui vertical segment m-padded" th:if="${blog.published}==true"
                         th:each="blog:${page.list}">
                        <div class="ui middle aligned  mobile reversed stackable grid">
                            <div class="ten wide column">
                                <h3 class="ui header"><a href="" class="m-black" th:text="${blog.title}"
                                                         th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">标题</a>
                                </h3>
                                <p class="m-text" th:text="|${blog.description}......|">简介内容</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="../static/image/me.jpg" th:src="@{${blog.user.avatar}}" alt=""
                                                     class="ui avatar image">
                                                <div class="content"><a href="#" class="header"
                                                                        th:text="${blog.user.nickname}"></a></div>
                                            </div>
                                            <div class="item">
                                                <i class=" calendar icon"></i> <span class="m-text-small"
                                                                                     th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}"></span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span class="m-text-small"
                                                                               th:text="${blog.views}"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href=""
                                           class="ui blue basic button m-padded-mini m-opacity-mini m-text-small m-padded-mini"
                                           th:text="${blog.type!=null?blog.type.name:'未分类'}">分类</a>
                                    </div>
                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                    <img src="../static/image/picture.png" th:src="@{${blog.firstPicture}}" alt=""
                                         class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- bottom  -->
                <div class="ui bottom attached segment tm" th:if="${page.pages}>1">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a href="" th:href="@{/(pageNum=${page.hasPreviousPage}?${page.prePage}:1)}"
                               th:if="${page.hasPreviousPage}" class="ui mini blue basic button ">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a href="" th:href="@{/(pageNum=${page.hasNextPage}?${page.nextPage}:${page.pages})}"
                               th:if="${page.hasNextPage}" class="ui mini blue basic button ">下一页</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- right -->
            <div class="five wide column">
                <!-- 分类 -->
                <div class="ui segments">
                    <div class="ui blue secondary segment tm">
                        <div class="ui two column grid ">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a href="#" th:href="@{types/-1}" target="_blank">more <i
                                        class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui segment tm">
                        <div class="ui fluid vertical menu tm-qt">
                            <a href="#" th:href="@{/types/{id}(id=${type.id})}" target="_blank" class="item tm-qt"
                               th:each="type:${types}">
                                <span th:text="${type.name}"></span>
                                <div class="ui blue basic left pointing label" th:text="${type.count}">13</div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--标签-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui blue secondary segment tm">
                        <div class="ui two column grid">
                            <div class="column ">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column ">
                                <a href="#" th:href="@{tags/-1}" target="_blank">more <i
                                        class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui segment tm">
                        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" target="_blank"
                           class="ui blue basic left pointing label m-margin-tb-tiny tm-qt" th:each="tag : ${tags}">
                            <span th:text="${tag.name}" class="tm">方法论</span>
                            <div class="detail tm" th:text="${tag.count}">23</div>
                        </a>
                    </div>

                </div>
                <!--最新推荐-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment tm">
                        <i class="bookmark icon"></i>最新推荐
                    </div>
                    <div class="ui segment tm" th:if="${blog.published}==true" th:each="blog : ${recommendBlogs}">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"
                           class="m-black m-text-thin tm-qt" th:text="${blog.title}">用户故事（User Story）</a>
                    </div>
                </div>

                <!--热度排行-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment tm">
                        <i class="fire icon"></i>热度排行
                    </div>
                    <div class="ui segment tm" th:if="${blog.published}==true" th:each="blog : ${views}">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"
                           class="m-black m-text-thin tm-qt" th:text="${blog.title}">用户故事（User Story）</a>
                    </div>
                </div>

                <!--友情链接-->
                <div class="ui accordion segments m-margin-top-large">
                    <div class="ui blue title secondary segment tm ">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="thumbs up outline icon"></i>友情链接
                            </div>
                            <div class="right aligned column ">
                                <a class="right">申请友链<i class="dropdown double icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <!--申请友链-->
                    <div class="ui content segment tm">
                        <!--            <div class="ui form link">-->
                        <div class="ui form link">
                            <div class="required field">
                                <label>你的昵称</label>
                                <input type="text" name="nickname" placeholder="你的昵称/姓名">
                            </div>
                            <div class="required field">
                                <label>邮箱</label>
                                <input type="text" name="email" placeholder="接收申请结果的邮箱，将为您保密">
                            </div>
                            <div class="required field">
                                <label>网站名</label>
                                <input type="text" name="name" placeholder="您的网站名称">
                            </div>
                            <div class="required field">
                                <label>网址</label>
                                <input type="text" name="url" placeholder="您网站的完整url，包括http://">
                            </div>
                            <div class="ui message hidden" id="message">
                                <i class="close icon" onclick="hidden()"></i>
                                <div class="header" id="title">
                                    友链申请失败
                                </div>
                                <p id="content">原因未知</p>
                            </div>
                            <div class="ui primary submit button" id="friend">提交</div>
                        </div>
                    </div>
                    <!--友链-->
                    <div class="ui segment tm">
                        <a href="#" th:href="${friendLink.url}" target="_blank"
                           class="ui blue basic left pointing label m-margin-tb-tiny tm-qt"
                           th:each="friendLink : ${friendLinks}">
                            <span th:text="${friendLink.name}" class="tm">方法论</span>
                        </a>
                    </div>
                </div>
                <!--二维码-->
                <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
                <div class="ui centered card " style="width: 11em">
                    <img src="../static/image/mine.png" th:src="@{/image/mine.png}" alt="" class="ui rounded image">
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<br>
</div>
<div id="aplayer">

</div>
<!-- 底部 -->
<footer th:replace="_fragments::footer" class="ui inverted vertical segment m-padded-tb-massive">
</footer>


<script src="../static/js/jquery-3.5.1.js" th:src="@{/js/jquery-3.5.1.js}"></script>
<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<script src="../static/js/APlayer.min.js" th:src="@{/js/APlayer.min.js}"></script>
<script src="../static/js/music.js" th:src="@{/js/music.js}"></script>
<!--    雪花特效-->
<script src="../static/js/snow.js" th:src="@{/js/snow.js}"></script>
<!--板娘 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    //看板娘设置
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 100,
            "height": 200,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 0.2
        }
    });

    //申请友链下拉表单
    $('.ui.accordion').accordion({
        selector: {
            trigger: '.title .two .column .right'
        }
    });


    //表单验证
    $('.ui.form').form({
        on: 'blur',
        fields: {
            url: {
                identifier: 'url',
                rules: [
                    {
                        type: 'empty',
                        prompt: '请输入你的网址'
                    },
                    {
                        type: 'url',
                        prompt: '请填写正确的网址'
                    }
                ]
            },
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的昵称'
                }]
            },
            name: {
                identifier: 'name',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的网站名'
                }]
            },
            email: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });

    let nickname = $("[name='nickname']");
    let name = $("[name='name']");
    let email = $("[name='email']");
    let url = $("[name='url']");
    let message = $("#message");
    let title = $("#title");
    let content = $("#content");

    //申请友链
    $('#friend').click(function () {
        let boo = $('.ui.form').form('validate form');
        if (boo) {
            $.ajax({
                url: '[[@{/friends}]]',	//请求地址
                type: 'POST',				//Post请求
                data: {
                    "nickname": nickname.val(),
                    "name": name.val(),
                    "email": email.val(),
                    "url": url.val()
                },
                dataType: 'json',
                success: function (data) {
                    // alert("data:" + data)//data:[object Object]
                    // alert("data.length:" + data.length)//data.length:undefined
                    // for (let i = 0; i < data.length; i++) {
                    //     alert("data["+i+"]:" + data[i])
                    // }
                    // json=eval(data);
                    // alert("json.length:"+json.length)//json.length:undefined
                    // for (let i = 0; i < json.length; i++) {
                    //     alert("json["+i+"]:" + json[i].msg)
                    //     alert("json["+i+"]:" + json[i].code)
                    //     alert("json["+i+"]:" + json[i].state)
                    // }
                    // alert("data.msg:" + data.msg)//拿到
                    // alert("data.state:" + data.state)//拿到
                    if (data.state == "positive") {
                        message.removeClass("negative")
                        title.text("申请成功")
                        nickname.val("")
                        name.val("")
                        email.val("")
                        url.val("")
                    }
                    if (data.state == "negative") {
                        message.removeClass("positive")
                        title.text("申请失败")
                    }
                    message.removeClass("hidden")
                    content.text(data.msg)
                    message.addClass("visible")
                    message.addClass(data.state)
                },		//请求成功后的回调函数
                error: function (err) {
                    title.text("申请失败")
                    message.removeClass("hidden")
                    content.text("申请的人太多啦，请稍后再试")
                    message.addClass("visible")
                    message.addClass("negative")
                },
            });
        }
    })
    //隐藏提示
    function hidden(){
        message.removeClass("visible")
        message.addClass("hidden")
    }

    // $('#friend').click(function () {
    //   $("#err").innerHTML = "";
    //   $("#success").innerHTML = "";
    //   let form1=$('.ui.form.link');
    //   form1.removeClass("success")
    //   form1.removeClass("error")
    //   let boo = $('.ui.form').form('validate form');
    //   if (boo) {
    //     $('.ui.form').form('is valid');
    //     let nickname = $("[name='nickname']").val();
    //     let name = $("[name='name']").val();
    //     let email = $("[name='email']").val();
    //     let url = $("[name='url']").val();
    //     $.ajax({
    //       url: '[[@{/friends}]]',	//请求地址
    //       type: 'POST',				//Post请求
    //       data: {
    //         "nickname": nickname,
    //         "name": name,
    //         "email": email,
    //         "url": url,
    //         dataType:'json',
    //         success:function(data){
    //           alert(data[0])
    //           if (data[0].state=="success"){
    //             form1.removeClass("error")
    //             form1.addClass(state)
    //           }
    //         },		//请求成功后的回调函数
    //         error:function(err){},
    //       }
    //     });
    //   }
    // })

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    })
    //页脚
    $('#newblog-container').load("[[@{/footer/newblog}]]");
</script>
</body>

</html>